<template>
	<view class="xcInput">
		<view :class="['flex-h-c',inputStyle]">
			<text class="label" v-if="isShowLable">{{name}}</text>
			<i :class="'icon iconfont '+icon" v-if="icon!=''" @click="$emit('iconClick')"></i>
			<block v-if="type=='input'">
				<input v-if="!isImmediateRes" :type="inputType" :value="value" @input="$emit('input',$event.target.value,name)" :placeholder="'请输入'+name" class="input" />
				<input v-else :value="value" :type="inputType" @input="$emit('update:value',$event.target.value)" :placeholder="'请输入'+name" class="input" />
			</block>
			<view class="input select" v-if="type=='select'" >
				<picker :range="pickerData" range-key="name" :value="value" @change="pickerChange">
					<view class="flex-space-between">
						<text :class="value == '' ? 'placeholder' :''">
							<block v-if="value == ''">
								{{name}}
							</block>
							<block v-else>
								{{pickerName}}
							</block>
						</text>
						<i class="icon iconfont iconarrow-down-filling"></i>
					</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			inputStyle: {
				type: String,
				default: 'line'
			},
			isImmediateRes:{
				type:Boolean,
				default:true
			},
			inputType:{
				type: String,
				default: 'text'
			},
			value:{
				type: String|Object,
				default: ''
			},
			type: {
				type: String,
				default: "input"
			},
			name: {
				type: String,
				default: ''
			},
			icon:{
				type: String,
				default: ''
			},
			isShowLable:{
				type:Boolean,
				default:false
			},
			pickerData: {
				type: Array,
				default:()=>{
					return []
				} 
			}
		},
		data(){
			return {
				pickerName:""
			}
		},
		methods:{
			pickerChange(event){
				let item = this.pickerData[event.detail.value];
				this.pickerName = item.name;
				this.$emit('update:value',item.id);
			}
		}
	}
</script>

<style lang="scss">
	.xcInput {
		.line {
			border-bottom: 2upx solid $uni-border-minor-color;
			padding: 10upx 0upx;
			input {
				padding-left: 10upx;
			}
		}

		.label {
			margin-right: 20upx;
		}

		.box {
			.input {
				padding: 16upx 0upx 16upx 20upx;
				border: 1px solid #1F95EC;
				border-radius: 4upx;
				flex: 1;
				.placeholder {
					color: grey !important;
					padding-left: 10upx;
				}
			}
			.icon {
				padding-right: 10upx
			}
			
		}

		.icon {
			color: $uni-color-primary
		}

	}
</style>
